<template>
  <div>
    <section class="MyShopItems">
      <div class="p-img">
        <img class="pi-imgOne" :src="MyShopItems.shopBgUrl" alt />
        <div class="p-task"></div>
        <img
          class="pi-imgTwo"
          v-lazy="{src: MyShopItems.shopLogoUrl, error: defaultImg(1), loading: defaultImg(1)}"
          alt
        />
        <span class="pi-spanOne">{{MyShopItems.shopName}}</span>
        <div v-show="isSelf">
          <span
            class="pi-spanTwo"
            @click="goUrl('addShopUrl',{shopId:MyShopItems.shopId,shopThirdPartyWebUrl:MyShopItems.shopThirdPartyWebUrl})"
            v-show="!MyShopItems.shopThirdPartyWebUrl"
          >添加网址</span>
          <span
            class="pi-spanTwo"
            @click="goUrl('addShopUrl',{shopId:MyShopItems.shopId,shopThirdPartyWebUrl:MyShopItems.shopThirdPartyWebUrl})"
            v-show="MyShopItems.shopThirdPartyWebUrl"
          >修改网店</span>
        </div>
        <span
          class="pi-spanTwo"
          @click="goNetWork(MyShopItems.shopThirdPartyWebUrl)"
          v-show="!isSelf"
        >访问网址</span>
      </div>
      <div class="p-center">
        <p>简介：</p>
        {{MyShopItems.shopBriefIntro}}
      </div>
      <div class="p-footer" v-show="isProductHeader">
        <div class="pf-header">
          <span class="pfh-spanOne">商品介绍</span>
          <div v-show="isSelf">
            <div v-show="ProductItems.length > 0">
              <span class="pfh-spanTwo" @click="goUrl('moreShop',{shopId:MyShopItems.shopId})">查看全部</span>
              <img
                src="@/assets/images/shop_enter.png"
                alt
                @click="goUrl('moreShop',{shopId:MyShopItems.shopId})"
              />
            </div>
          </div>
        </div>
        <div class="pf-section">
          <div class="null32"></div>
          <div v-show="isProduct">
            <ProductItems :ProductItems.sync="ProductItems" @ProductItemsClick="ProductItemsClick"></ProductItems>
          </div>
          <div v-show="!isProduct">
            <div
              v-show="isSelf"
              class="add-product"
              @click="goUrl('editProduct',{shopId:MyShopItems.shopId})"
            >
              <img src="@/assets/images/shop_add.png" alt />
              <span>添加商品</span>
            </div>
            <div class="no-product" v-show="!isSelf">暂无商品</div>
          </div>
        </div>
        <!-- end -->
      </div>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import {Lazyload } from 'vant'
Vue.use(Lazyload);
import mixin from "@/utils/mixin";
import ProductItems from "@/components/ProductItems";
export default {
  name: "MyShopItems",
  mixins: [mixin],
  props: [
    "MyShopItems",
    "ProductItems",
    "isSelf",
    "isProduct",
    "isProductHeader"
  ],
  components: {
    ProductItems
  },
  data() {
    return {
      show: {}
    };
  },
  created() {},
  mounted() {},
  methods: {
    goNetWork: function(url) {
      window.location.href = url;
    },
    ProductItemsClick() {}
  }
};
</script>
<style lang="scss" scoped>
.null32 {
  width: 100%;
  height: 32px;
}
.null48 {
  width: 100%;
  height: 48px;
}
.MyShopItems {
  .p-img {
    width: 100%;
    height: 342px;
    position: relative;
    .p-task {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0.48;
      background: #000000;
    }
    .pi-imgOne {
      width: 100%;
      height: 100%;
    }
    .pi-imgTwo {
      width: 108px;
      height: 108px;
      position: absolute;
      left: 32px;
      top: 110px;
      border-radius: 10px;
    }
    .pi-spanOne {
      font-family: PingFangSC-Medium;
      font-size: 40px;
      color: #ffffff;
      position: absolute;
      left: 164px;
      top: 136px;
      font-weight: bold;
    }
    .pi-spanTwo {
      font-family: PingFangSC-Regular;
      font-size: 24px;
      color: #ffffff;
      width: 128px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      background: #ff2525;
      border-radius: 24px;
      position: absolute;
      right: 32px;
      top: 140px;
    }
  }
  .p-center {
    width: 638px;
    height: 198px;
    padding: 24px;
    line-height: 48px;
    text-align: left;
    font-family: PingFangSC-Regular;
    font-size: 30px;
    color: #303133;
    background: #ffffff;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    position: absolute;
    left: 50%;
    margin-left: -343px;
    top: 252px;
  }
  .p-footer {
    .pf-header {
      width: 100%;
      height: 56px;
      position: relative;
      margin-top: 206px;
      img {
        width: 26px;
        height: 26px;
        position: absolute;
        right: 32px;
        top: 50%;
        margin-top: -13px;
      }
      .pfh-spanOne {
        font-family: PingFangSC-Medium;
        font-size: 40px;
        color: #303133;
        position: absolute;
        left: 32px;
        top: 0;
        font-weight: bold;
      }
      .pfh-spanTwo {
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #c8c8c8;
        position: absolute;
        right: 78px;
        top: 3px;
      }
    }
    .pf-section {
      .no-product {
        width: 686px;
        height: 210px;
        text-align: center;
        line-height: 210px;
        background: rgba(248, 249, 251, 1);
        border-radius: 8px;
        position: relative;
        margin: auto;
        font-size: 30px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 37, 37, 1);
      }
      .add-product {
        width: 686px;
        height: 210px;
        background: rgba(248, 249, 251, 1);
        border-radius: 8px;
        position: relative;
        margin: auto;
        img {
          width: 42px;
          height: 42px;
          position: absolute;
          left: 322px;
          top: 55px;
        }
        span {
          font-size: 30px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(255, 37, 37, 1);
          position: absolute;
          left: 283px;
          top: 113px;
        }
      }
    }
  }
}
</style>
